<template>
    <div class="login-container">
        <div class="bg-image"></div>
        <div class="form-container">
            <el-form ref="form" :model="form" label-width="60px" class="login-form">
                <h3>欢迎登录</h3>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="identity">
                    <el-radio-group v-model="form.identity">
                        <el-radio label="student">学生</el-radio>
                        <el-radio label="teacher">教师</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.prevent="login">登录</el-button>
                    <el-button @click.prevent="resetForm">重置</el-button>
                </el-form-item>
                <p class="text-danger mt-3" v-if="errorMessage">{{ errorMessage }}</p>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            form: {
                identity: 'student',
                username: '51255999901',
                password: '123456'
            },
            errorMessage: ''
        }
    },
    methods: {
        resetForm() {
            this.$refs.form.resetFields();
        },
        login() {
            // 保存用户名到本地存储
            localStorage.setItem('username', this.form.username)
            // 根据身份跳转到不同的首页
            if (this.form.identity === 'student') {
                this.$router.push('/welcome');
            } else {
                this.$router.push('/welcometea');
            }
            // this.$router.push('/welcome')
            // if (loginSuccess) {
            //     // 登录成功，根据身份跳转到不同的首页
            //     if (this.form.identity === 'student') {
            //         this.$router.push('/student/home');
            //     } else {
            //         this.$router.push('/teacher/home');
            //     }
            // } else {
            //     // 登录失败，弹窗提示错误信息
            //     this.$router.push('/welcome')
            //     this.errorMessage = '登录失败，请检查用户名和密码'
            // }
        }
    },
}
</script>
<style scoped>
.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.bg-image {
    background-image: url('../assets/images/background.jpg');
    /*background-image: url('../assets/images/ecnulogo.gif');*/
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    z-index: -1;
}
.form-container {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 20px;
}
.text-danger {
    text-align: center;
    color: #dc3545;
}

.mt-3 {
    margin-top: 1rem;
}

.login-form {
    max-width: 400px;
    margin: auto;
}
h3 {
    text-align: center;
    margin-bottom: 20px;
}
</style>